<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>网页设计作业</title>
<link rel="icon" type="image/icon" href="assets/images/tabicon.ico">

<link rel="stylesheet" type="text/css" href="">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,700,700i|Josefin+Sans:700" rel="stylesheet">
<link href="assets/css/main.css" rel="stylesheet">
<link rel="icon" href="assets/images/logo.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

</head>

<body>
<div id="index">                                           
	<div class="container main">
		<div class="row home">
			<div id = "index_left" class="col-md-6 left">
				<img class="img-responsive img-rabbit" src="assets/images/home.jpg">
			</div>
			<div id = "index_right" class="col-md-6 text-center right">
				<div class="logo">
					<img src="assets/images/logo.png">
					<h4>I am rabbit</h4>
				</div>
				<p class="home-description">
					Hi, I am Mondyy,  I am passionate about design, development and interaction. I really love what I do.
				</p>
				<div class="btn-group-vertical custom_btn animated slideinright">
					<div id="about" class="btn btn-rabbit">About</div>
					<div id="work" class="btn btn-rabbit">Work</div>
					<div id="contact" class="btn btn-rabbit">Contact</div>
				</div>      
				<div class="social">
					<a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
					<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
					<a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
				</div>
			</div>
		</div>

		
	</div>
</div>                                                      

<div id="about_scroll" class="pages ">                      
	<div class="container main">
		<div class="row">
			<div class="col-md-6 left" id="about_left">
				<img class="img-responsive img-rabbit" src="assets/images/about.jpg">
			</div>

			<div class="col-md-6 right" id="about_right">
				<a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to home </a>
				<div id="watermark">
					<h2 class="page-title" text-center>About</h2>
					<div class="marker">a</div>
				</div>
				<p class='subtitle'>题外话，给大家安利《镇魂》
				</p>
				<p class="info">"《镇魂》是一部由上海时悦影视、乐视视频联合打造，周远舟执导，白宇、朱一龙、辛鹏、高雨儿、李砚、江明洋、李思琪、刘泯廷、王超伟主演的网络剧，改编自priest 的现代都市奇幻文，讲述了赵云澜、沈巍两人，共同守护两界和平的故事，于2018年6月13日在优酷播出。"</p>  
			</div>
		</div>
	</div>            
</div>                                                                

<div id="work_scroll" class="pages">                                 
	<div class="container main">
		<div class="row">
			<div class="col-md-6" id="work_left">
				<div id="owl-demo" class="owl-carousel owl-theme">
					<div class="item"><img class="img-responsive img-rabbit" src="assets/images/work.jpg"></div>
					<div class="item"><img class="img-responsive img-rabbit" src="assets/images/home.jpg"></div>
					<div class="item"><img class="img-responsive img-rabbit" src="assets/images/contact.jpg"></div>
				</div>
			</div>

			<div class="col-md-6" id="work_right">
				<a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Home </a>
				<div id="watermark">
				<h2 class="page-title" text-center>Work</h2>

                <h3>  <a href="1/index.html">第一周</a>	     
                  <a href="3/3.html">第三周</a>             	
	             <a href="4/4.html">第四周</a>              </h3>
		        <h4>  <a href="5/5.html">第五周 1</a>           
                  <a href="5/5.1.html">第五周 2</a>          
                  <a href="6/6.html">第六周</a>              </h4>
	            <h5>  <a href="7/clear.html">第七周</a>          
		         <a href="8/作业提交.html">第八周</a>	    
                 <a href="9/9.html">第九周</a>              </h5>
                <h6> <a href="10/10.html">第十周</a>	        
	             <a href="12/期中作业.html">第十二周</a>     
                <a href="13/13.html">第十三周</a>          </h6>
	            <a href="14/14.html">第十四周</a>          
 



					
					<div class="marker">w</div>
				</div>
				
				
				
			</div>
		</div>
	</div>    
</div>                                                                 


<div id="contact_scroll" class="pages">                             
	<div class="container main">
		<div class="row">
			<div class="col-md-6 left" id="contact_left">
				<img class="img-responsive img-rabbit" src="assets/images/contact.jpg">
			</div>

			<div class="col-md-6 right" id="contact_right">
				<a href="#index" class="btn btn-rabbit back"> <i class="fa fa-angle-left" aria-hidden="true"></i> Back to Home </a>
				<div id="watermark">
					<h2 class="page-title" text-center>Contact</h2>
					<div class="marker">c</div>
				</div>
				<p class='subtitle'>我的提交页面
				</p>
				<!-- form -->
				<form class="form_edit"> 
					<div class="form-group">
						<input type="name" class="form-control" id="exampleInputName" placeholder=" UserName">
					</div>

					<div class="form-group">
					<input type="email" class="form-control" id="exampleInputEmail1" placeholder="adress">
					</div>

					<div class="form-group">
					<textarea class="form-control" rows="5" placeholder="Message"></textarea>
					</div>
					<button type="submit" class="btn btn-rabbit submit">Send Message</button>
				</form>
			</div>
		</div>
	</div>

	<footer class="text-center">
		<div class="container bottom">
			<div class="row">
				<div class="col-sm-12">
					<p>Copyright &copy; 2017.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
				</div>
			</div>
		</div>
	</footer>
	
</div>                                                             

<script src="assets/js/jquery-3.1.0.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>